<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar title="首页" :fixed="true" :placeholder="true" />

    <CityChoose />

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in bannerList" :key="item.bannerid">
        <van-image width="100%" height="100%" :src="item.img" fit="cover" />
      </van-swipe-item>
    </van-swipe>

    <!-- 导航 -->
    <van-grid column-num="5">
      <van-grid-item
        icon="photo-o"
        :text="item.title"
        v-for="item in navList"
        :key="item.navid"
      >
        <template #icon>
          <van-image width="35px" height="35px" :src="item.imgurl" />
        </template>
      </van-grid-item>
    </van-grid>

    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="proWrap">
        <div
          v-for="item in proList"
          :key="item.proid"
          class="proItem"
          @click="goToDetail(item.proid)"
        >
          <img :src="item.img1" alt="" />
          <p>{{ item.proname }}</p>
          <span> ￥ {{ (item.originprice * item.discount) / 10 }}</span>
        </div>
      </div>
    </van-list>

    <!-- 底部 -->
    <!-- <van-tabbar v-model="active" active-color="#f66" :placeholder="true">
    <van-tabbar-item icon="home-o">
      <template #icon>
        <span class="iconfont icon-shouye"></span>
      </template>
      首页
    </van-tabbar-item>
    <van-tabbar-item icon="like-o">
      <template #icon>
        <span class="iconfont icon-fenlei"></span>
      </template>
      分类
    </van-tabbar-item>
    <van-tabbar-item icon="friends-o">
      <template #icon>
        <span class="iconfont icon-gouwuche"></span>
      </template>
      购物车
    </van-tabbar-item>
    <van-tabbar-item icon="setting-o">
      <template #icon>
        <span class="iconfont icon-wode"></span>
      </template>
      我的
    </van-tabbar-item>
  </van-tabbar> -->

    <van-back-top bottom="140" style="background-color: #f66" />
  </div>
</template>

<script>
// import HomeHeader from "./components/HomeHeader.vue";

// export default {
//   components: {
//     HomeHeader,
//   },
// };

// import axios from "axios";
import navList from "@/assets/js/navList";
// import http from "@/utils/http";

import CityChoose from "./components/CityChoose.vue";

import { getBannerListApi, getProListApi } from "@/api";

export default {
  name: "home",
  data() {
    return {
      bannerList: [],
      navList,
      active: 0,
      proList: [],
      // 是否正在加载
      loading: false,
      // 是否已全部加载
      finished: false,
      count: 1,
      top: 0,
    };
  },

  components: {
    CityChoose,
  },

  mounted() {
    this.getBannerList();
    // this.getProList();
  },

  methods: {
    async getBannerList() {
      // http.get("/banner/list").then((res) => {
      //   this.bannerList = res.data.data;
      // });

      // const res = await http.get("/banner/list");
      // this.bannerList = res.data.data;

      const res = await getBannerListApi();
      res && (this.bannerList = res.data);
    },
    async getProList() {
      const res = await getProListApi({
        count: this.count,
        limitNum: 20,
      });

      this.proList = [...this.proList, ...res.data];
      this.count++;
      if (res.data.length === 20) {
        this.loading = false;
      } else {
        this.finished = true;
      }

      // axios
      //   .get("http://121.89.205.189:3000/api/pro/list", {
      //     params: {
      //       count: this.count,
      //       limitNum: 20,
      //     },
      //   })
      //   .then((res) => {
      //     if (res.data.code === "200") {
      //       console.log(res);
      //       this.proList = [...this.proList, ...res.data.data];
      //       this.count++;
      //       if (res.data.data.length === 20) {
      //         this.loading = false;
      //       } else {
      //         this.finished = true;
      //       }
      //     }
      //   })
      //   .catch((error) => {
      //     console.log(error);
      //   });
    },
    onLoad() {
      console.log("我拉到底了");
      this.getProList();
    },
    goToDetail(id) {
      // console.log(id);
      this.$router.push("/detail/" + id);
    },
  },
  activated() {
    console.log(this.top);
    // document.documentElement.scrollTo({ top: this.top });
    // document.documentElement.scrollTo(this.top, 0);
    document.documentElement.scrollTop = this.top;
  },
  deactivated() {
    console.log(document.documentElement.scrollTop);
    this.top = document.documentElement.scrollTop;
  },
};
</script>

<style scoped lang="less">
// :deep()是less的一个语法，可以去修改子组件的样式
:deep(.van-nav-bar) {
  background-color: @theme-color;
  .van-nav-bar__title {
    color: #fff;
  }
}

.my-swipe .van-swipe-item {
  height: 220px;
  background-color: #39a9ed;
}

.iconfont {
  font-size: @xl-font;
}

.proWrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;

  .proItem {
    width: 165px;
    height: 275px;
    border: 1px solid @border-color;
    margin-bottom: 15px;

    img {
      width: 100%;
      height: 200px;
    }

    p {
      font-size: @xs-font;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-height: 18px;
    }

    span {
      color: @theme-color;
      font-size: @xs-font;
    }
  }
}

// :deep(.van-back-top--active) {
//   background-color: @theme-color !important;
// }
</style>
